<template>
  <el-container>
    <el-main style="height: 100%;width: 100%;">
      <el-row :gutter="30" style="height: 100%;width: 100%">
        <el-col :span="6"  style="height: 100%;" >

          <div class="panal">
            <el-row style="height: 50%;width: 100%">
              <el-container>
                <el-header style="height: 60px;padding-left: 20px;border-bottom: 1px solid rgba(7,118,181,.7);line-height: 60px;font-size: 16px;font-weight: 500">
                  合同类型分析
                </el-header>
                <el-main >
                  <pieChart style="height: 100%" ref="pieChart"></pieChart>
                </el-main>
              </el-container>
            </el-row>
            <el-row style="height: 50%;width: 100%">
              <el-container>
                <el-header style="height: 60px;padding-left: 20px;border-bottom: 1px solid rgba(7,118,181,.7);line-height: 60px;font-size: 16px;font-weight: 500;border-top: 1px solid rgba(7,118,181,.7);">
                  合同执行情况
                </el-header>
                <el-main >
                  <pieChart style="height: 100%" ref="htPie"></pieChart>
                </el-main>
              </el-container>
            </el-row>
          </div>
        </el-col>
        <el-col :span="12"   style="height: 100%;">
          <div class="panal">
          <el-row style="height: 50%">
            <el-container >
              <el-header style="height: 60px;padding-left: 20px;border-bottom: 1px solid rgba(7,118,181,.7);line-height: 60px;font-size: 16px;font-weight: 500">
                根据时间合同统计
              </el-header>
              <el-main>
                <barLineCharts style="height: 100%" ref="lineChartByTime"></barLineCharts>
              </el-main>

            </el-container>
          </el-row>
            <el-row style="height: 50%;border-top: 1px solid rgba(7,118,181,.7);">
              <el-container >
                <el-header style="height: 60px;padding-left: 20px;border-bottom: 1px solid rgba(7,118,181,.7);line-height: 60px;font-size: 16px;font-weight: 500">
                  根据签订部门合同统计
                </el-header>
                <el-main>
                  <barLineCharts style="height: 100%" ref="lineChartByDept"></barLineCharts>
                </el-main>

              </el-container>
            </el-row>
          </div>

        </el-col>
        <el-col :span="6" style="height: 100%">
          <div class="panal">
            <el-row style="height: 100%;width: 100%;">
              <el-container >
                <el-header style="height: 60px;padding-left: 20px;border-bottom: 1px solid rgba(7,118,181,.7);line-height: 60px;font-size: 16px;font-weight: 500">
                  根据厂家数量统计
                </el-header>
                <el-main style="padding: 0;overflow: hidden;"  >
                  <div style="width: 100%;border: 1px solid #368AB6;font-size: 14px">
                    <el-row :gutter="20" style="text-align: center;color: white;height: 40px;line-height: 40px">
                      <el-col :span="4" style="border-right: 1px solid #368AB6;height: 40px">序号</el-col>
                      <el-col :span="14" style="border-right: 1px solid #368AB6;height: 40px">合作单位</el-col>
                      <el-col :span="6" style="border-right: 1px solid #368AB6;height: 40px">合同数量</el-col>
                    </el-row>
                  </div>
                                    <vue-seamless-scroll :data="companyContract" ref="seamlessScroll1" :class-option="classOption" class="warp1" style="height: 100%" >
                                      <div style="width: 100%;border: 1px solid #368AB6;border-top: none;font-size: 12px" v-for="(item,index) in  companyContract">
                                        <el-row :gutter="20" style="text-align: center;color:#D2C172;height: 40px;line-height: 40px">
                                          <el-col :span="4" style="border-right: 1px solid #368AB6;font-weight: bolder;height: 40px">{{index+1}}</el-col>
                                          <el-col :span="14" style="border-right: 1px solid #368AB6;font-weight: bolder;height: 40px">{{item.contractFactory}}</el-col>
                                          <el-col :span="6" style="border-right: 1px solid #368AB6;font-weight: bolder;height: 40px">{{item.contractCount}}</el-col>
                                        </el-row>
                                      </div>
                                    </vue-seamless-scroll>
                </el-main>
              </el-container>
            </el-row>


          </div>
        </el-col>
      </el-row>
    </el-main>

  </el-container>
</template>
<script>
  import { parseTime } from '../../../utils/entfrm'
  import pieChart from '../../dashboard/BiPieChart'
  import lineChart from '../../dashboard/BiLineChart'
  import barLineCharts from '../../dashboard/BiBarLineCharts'
  import { getContractByFactory,getContractByYear,getContractByDept ,getContractByType,getCountByNode} from "@/api/biInfo/contractManage";
  import { getProfile } from "@/api/system/user";
  import 'echarts-liquidfill';
  import vueSeamlessScroll from 'vue-seamless-scroll'

  export default {
    name: 'index',
    components: {
      pieChart,
      lineChart,
      barLineCharts,
      vueSeamlessScroll
    },
    data() {
      return {
        title:"民祥科技BI报表系统",
        biData:[],
        companyContract:[],
        htType:[],
        classOption: {
          step: 0.5,
          singleHeight: 30,
          limitMoveNum:20,
          openWatch: true,
        },
      }
    },
    methods:{
      formatTime(date) {
        return parseTime( new Date().getTime() ,'{y}-{m}-{d} ')+ date.toLocaleTimeString();
      },
      getCountByNode(){
        let   htNode="",htData=0;

        getCountByNode().then(response => {
          let htNode = "", htData = 0;
          let chartData = {
            series: [{
              name: '合同执行情况',
              type: 'pie',
              radius: [60, 95],
              center: ['50%', '50%'],
              data: []

            }],
            lengendData: [],
            legShow: true
          };
          response.data.forEach((item, index) => {
            if (index == 0) {
              htNode = item.contractNode;
              chartData.lengendData.push(item.contractNode);
            }
            if (item.contractNode == htNode) {
              htData += item.contractData;
            } else {
              htNode = item.contractNode;
              chartData.lengendData.push(item.contractNode);
              chartData.series[0].data.push({name:item.contractNode,value:item.contractCount});
              htData=0;
            }
            // response.data.forEach((item,index)=>{
            //   chartData.lengendData.push(item.contractType);
            //   this.htType.push(item.contractType);
            //   chartData.series[0].data.push({name:item.contractType,value:item.contractCount})
            // })
            this.$refs.htPie.setData(chartData);
          })
        })
      },
      getContractByType(){
        getContractByType().then(response => {
          let  chartData={
            series:[{
              name:'合同类型',
              type: 'pie',
              radius: [60, 95],
              center: ['50%', '50%'],
              data:[]

            }],
            lengendData:[],
            legShow:true
          };
          response.data.forEach((item,index)=>{
            chartData.lengendData.push(item.contractType);
            this.htType.push(item.contractType);
            chartData.series[0].data.push({name:item.contractType,value:item.contractCount})
          })
          this.$refs.pieChart.setData(chartData);
        })
      },
      getContractByTime(){
        getContractByYear().then(response => {
          let  chartData={
            series:[{
              name: '采购类',
              type: 'bar',
              barWidth: '10%',
              label: {
                show: true, // 可以选择在柱子的顶部显示标签
                // 其他样式设置，如字体大小、颜色等
                position: 'top',
                color: '#fff' // 假设背景色为深色，则文字颜色为白色，以便看清
              },
              data: []
            },
              {
                name: '安全环保类',
                type: 'bar',
                barWidth: '10%',
                label: {
                  show: true, // 可以选择在柱子的顶部显示标签
                  // 其他样式设置，如字体大小、颜色等
                  position: 'top',
                  color: '#fff' // 假设背景色为深色，则文字颜色为白色，以便看清
                },
                data: []
              },
              {
                name: '信息类',
                type: 'bar',
                barWidth: '10%',
                label: {
                  show: true, // 可以选择在柱子的顶部显示标签
                  // 其他样式设置，如字体大小、颜色等
                  position: 'top',
                  color: '#fff' // 假设背景色为深色，则文字颜色为白色，以便看清
                },

                data:[]
              },
              {
                name: '其它类',
                type: 'bar',
                barWidth: '10%',
                label: {
                  show: true, // 可以选择在柱子的顶部显示标签
                  // 其他样式设置，如字体大小、颜色等
                  position: 'top',
                  color: '#fff' // 假设背景色为深色，则文字颜色为白色，以便看清
                },

                data:[]
              }
            ],
            xData:[]
          };
          let  xsYear="";
          response.data.forEach((item,index)=>{
            if(index==0){
              chartData.xData.push(item.contractTime+"年");
              xsYear=item.contractTime;
            }else if(xsYear==item.contractTime){

            }else{
              chartData.xData.push(item.contractTime+"年");
              xsYear=item.contractTime;
            }
            if(item.contractType=="采购类"){
              chartData.series[0].data.push(item.contractCount);

            }else if(item.contractType=="安全环保类"){
              chartData.series[1].data.push(item.contractCount);

            }else  if(item.contractType=="信息类"){
              chartData.series[2].data.push(item.contractCount);


            }else if(item.contractType=="其他类"){
              chartData.series[3].data.push(item.contractCount);
            }

          })
          this.$refs.lineChartByTime.setData(chartData);
        })
      },
      getContractByDept(){
        getContractByDept().then(response => {
          let  chartData={
            series:[{
              name: '合同数量',
              type: 'bar',
              barWidth:'20%',
              label: {
                show: true, // 可以选择在柱子的顶部显示标签
                position:'top',
                // 其他样式设置，如字体大小、颜色等
                color: '#fff' // 假设背景色为深色，则文字颜色为白色，以便看清
              },
              data: [],
            },
              {
                name: '合同数量',
                type: 'line',
                data: [],
              }],
            xData:[]
          };
          response.data.forEach((item,index)=>{
            chartData.xData.push(item.deptName);
            chartData.series[0].data.push(item.contractCount);
            chartData.series[1].data.push(item.contractCount);
          })
          this.$refs.lineChartByDept.setData(chartData);
        })

      },
      getContractByFactory(){
        getContractByFactory().then(response => {
               this.companyContract=response.data;
        })
      },

      dataSource(){
        getContractByFactory(this.queryParams).then(response => {
          let  chartData={
            series:[{
              name:'数据来源图',
              type: 'pie',
              radius: [60, 95],
              center: ['50%', '38%'],
              data:[]

            }],
            lengendData:["智能仓储","智慧物流","电子采购平台","DCS控制系统",'化验系统'],
            legShow:false
          };
          chartData.series[0].data=[{
            name:"智能仓储",
            value:15
          },
            {
              name:"智慧物流",
              value:15
            },
            {
              name:"电子采购平台",
              value:15
            },
            {
              name:"DCS控制系统",
              value:15
            },
            {
              name:"化验系统",
              value:15
            }
          ];
          this.$refs.pieChart.setData(chartData);
        })

      },
      getUser() {
        debugger;
        getProfile().then(response => {
          this.userInfo = response.data;
        });

      }

    },
    mounted() {
      this.getContractByType();
      this.getContractByFactory();
      this. getContractByTime();
      this.getContractByDept();
      this.getCountByNode();
    },
  }
</script>

<style >












</style>
